<template>
  <div>
    <Form :model="modelForm" ref="addForm" class="addApi-form" :rules="rule" :label-width="100">
      <Row :gutter="32" class="code-row-bg">
        <Col span="24">
          <!-- 接口地址 -->
          <Form-item prop="apiPath" :label="$t('module.apiManage.interfaceAddress')">
            <!-- <div class="apiGroup-path">
                    <span class="parent-prefix">{{prefix}}</span>
                    <Input
                        :placeholder="$t('module.apiManage.placeholder.interfaceAddress')"
                        v-model.trim="modelForm.apiPath"
                        :maxlength="32"
                    ></Input>
                </div> -->
            <Input
              type="text"
              v-model.trim="modelForm.apiPath"
              :placeholder="$t('module.apiManage.placeholder.interfaceAddress')"
              :maxlength="128"
            />
          </Form-item>
        </Col>
      </Row>
      <Row :gutter="32" class="code-row-bg">
        <Col span="12">
          <!-- 请求方式 -->
          <Form-item prop="requestMethod" :label="$t('module.apiManage.requestMethod')">
            <Select
              v-model="modelForm.requestMethod"
              style="width: 100%"
              :placeholder="$t('module.apiManage.placeholder.requestMethod')"
              clearable
            >
              <Option value="GET">GET</Option>
              <Option value="POST">POST</Option>
              <Option value="PUT">PUT</Option>
              <Option value="DELETE">DELETE</Option>
            </Select>
          </Form-item>
        </Col>
        <Col span="12">
          <!-- 状态 -->
          <Form-item prop="enabled" :label="$t('common.status')" required>
            <!-- <Select
              v-model="modelForm.enabled"
              style="width: 100%"
              :placeholder="$t('common.warning.selectStatus')"
              clearable
            >
              <Option :value="0">{{ $t('common.disable') }}</Option>
              <Option :value="1">{{ $t('common.enable') }}</Option>
            </Select> -->
            <RadioGroup v-model="modelForm.enabled" size="small">
              <Radio :label="1">
                <span>{{ $t("common.enable") }}</span>
              </Radio>
              <Radio :label="0">
                <span>{{ $t("common.disable") }}</span>
              </Radio>
            </RadioGroup>
          </Form-item>
        </Col>
      </Row>
      <Row :gutter="32" class="code-row-bg">
        
        <Col span="24">
          <!-- 接口描述 -->
          <Form-item prop="apiDesc" :label="$t('module.apiManage.interfaceDescription')">
            <Input
              type="textarea"
              :rows="4"
              v-model.trim="modelForm.apiDesc"
              :placeholder="$t('module.apiManage.placeholder.interfaceDescription')"
              :maxlength="200"
            />
          </Form-item>
        </Col>
      </Row>
    </Form>
  </div>
</template>
  <script>
import { apiGroup } from '@/api/apiManagement.js'
export default {
  name: 'addApi',
  mixins: [],
  props: {
    apiGroupInfo: {
      type: Object,
      default() {
        return {}
      }
    },
    tenantCode: {
      type: String,
      default: ''
    },
    dialogType: {
      type: String,
      default: 'add'
    },
    apiInfo: {
      type: Object,
      default() {
        return {}
      }
    },
  },
  data() {
    return {
      modelForm: {
        apiDesc: '', // 接口描述
        apiPath: '', // 接口地址
        requestMethod: '', // 请求方式
        enabled: 1, // 状态
        groupPath: '',
        routeId: ''
      },
      rule: {
        apiPath: [
          { required: true, message: this.$t('module.apiManage.placeholder.interfaceAddress'), trigger: 'blur' },
          { pattern: /^[a-zA-Z0-9-_\/]*$/, message: '只允许输入数字、字母以及 - _ /', trigger: 'blur' }
        ],
        requestMethod: [
          { required: true, message: this.$t('module.apiManage.placeholder.requestMethod'), trigger: 'change' }
        ]
      },
      prefix: '',
      actions: [
        {
          text: this.$t('common.save'),
          theme: 'primary',
          handle: this.save,
          loading: false
        },
        {
          text: this.$t('common.close'),
          handle: () => {
            this.$emit('Close')
          }
        }
      ]
    }
  },
  computed: {
    // apiGroupPath() {
    //   return `${this.prefix}${this.modelForm.apiPath}`
    // }
  },
  created() {
    if(this.dialogType === 'edit') {
        this.modelForm = Object.assign({}, this.apiInfo)
        
    }
    if(this.dialogType === 'add' && this.apiGroupInfo) {
        let str = ''
        const fixArr = this.apiGroupInfo.path.split('/')
        fixArr.forEach((element, index) => {
            if( index < fixArr.length - 1 ) str += element + '/'
        });
        
        this.modelForm.apiPath = str
    }
    this.$emit('SetTitle', this.$t(`module.apiManage.${this.dialogType === 'add'? 'addApi' : 'editApi'}`))
    this.$emit('SetPageWidth', 700)
    this.$emit('SetPageActions', this.actions)
  },
  methods: {
    save() {
      this.$refs['addForm'].validate(valid => {
        if (valid) {
          this.actions[0].loading = true
          const paramObj = Object.assign({},this.modelForm,{
            groupPath: this.apiGroupInfo.path,
            routeId: this.apiGroupInfo.routeId,
            tenantCode: this.tenantCode
          })
          console.log('addForm', paramObj)
          apiGroup[`${this.dialogType === 'add'? 'addApi' : 'editApi'}`](paramObj)
            .then(response => {
              this.$message.success({
                content: this.$t(`common.${this.dialogType === 'add'? 'addSuccess' : 'updateSuccess'}`),
                duration: 3
              })
              this.$emit('Close', true)
            })
            .catch(() => {
              this.actions[0].loading = false
            })
        } else {
          this.actions[0].loading = false
          this.$message.error({
            content: this.$t('common.formValidateFailed'),
            duration: 3
          })
        }
      })
    }
  }
}
</script>
  <style lang="less" scoped>
.addApi-form {
  // /deep/.ivu-form-item-label {
  //   margin-bottom: 14px;
  // }
  .apiGroup-path {
    display: flex;
    /deep/.ivu-input-wrapper {
      flex: 1;
      min-width: 140px;
      .ivu-input{
        height: 100%;
      }
    }
    .parent-prefix,
    .group-suffix {
      font-family: PingFangSC-Regular;
      font-size: 14px;
      color: #858b9c;
      letter-spacing: 0.22px;
      font-weight: 400;
      padding: 0 10px;
      background-color: #f8f8f9;
      color: #515a6e;
      border: 1px solid #d8d8d8;
      border-radius: 4px;
    }
    .parent-prefix {
      // padding: 0 10px;
      word-break: break-all;
      // overflow: hidden;
      // text-overflow: ellipsis;
      // white-space: nowrap;
      border-right: none;
      border-bottom-right-radius: 0 !important;
      border-top-right-radius: 0 !important;
    }
    .group-suffix {
      display: flex;
      align-items: center;
      border-bottom-left-radius: 0 !important;
      border-top-left-radius: 0 !important;
      border-left: none;
    }
  }
}
</style>